@import "./base/variables.less";
@import "./mixins/vendor-prefixes.less";

@subMenuH: 60px;
@thirdMenuH: 40px;
.main-sidebar {
  position: absolute;
  top: @headerH;
  left: 0px;
  bottom: 0px;
  width: @sidebarW;
  background-color: @subBg;
  transform: translate3d(0,0,0);
  .backface-visibility(hidden);
  .perspective(1000);
	.transition(transform .3s ease);
  z-index: 800;
  &.to-left {
		transform: translate3d(-@sidebarW,0,0);
	}
  .navbar-collapse{
    padding: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    .nav{
      > li {
        padding: 0;
        border-bottom: 1px solid @lightSubBg;
        &:hover,
        &:focus,
        &.active{
          background-color: rgba(0, 0, 0, .1);
        }
        &.active{
          > a{
            padding-left: 26px;
            border-left: 4px solid @green;
          }
        }
        > a{
          position: relative;
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: @subMenuH;
          // line-height: @subMenuH;
          padding: 0px 10px 0px 30px;
          cursor: pointer;
          > i{
            float: right;
            font-size: 12px;
            .transition-transform(~"0.3s ease-out");
            &.right{
              .rotate(0deg);
            }
            &.down{
              .rotate(90deg);
            }
          }
        }
        .nav-second-level{
          background-color: @mainBg;
          overflow: hidden;
          .transition(height .3s ease);
          > li {
            &.active {
              background: none;
              > a{
                background-color: @green;
                border-left: 0;
              }
            }
            > a{
              height: @thirdMenuH;
              line-height: @thirdMenuH;
              padding-left: 40px;
              font-size: 13px;
            }
          }
        }
      }
    }
  }
}
.switch-box{
  position: absolute;
  top: 0;
  right: -16px;
  display: block;
  width: 16px;
  height: 100%;
  pointer-events: none;
  cursor: pointer;
  z-index: 888;
  &:hover {
    .switch-toolbar {
      background-color: rgba(85,136,221,.5);
    }
  }
  .switch-toolbar {
    position: absolute;
		top:50%;
		left:0;
		margin-top: -100px;
    display: inline-block;
		width: 100%;
		height: 200px;
    // background-color: rgba(85,136,221,.5);
		background: url(../img/ake-icon.png) rgba(85,136,221,.5) no-repeat center center;
		background-position-x: -293px;
		border-radius: 5px;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
		pointer-events: auto;
		.transition(all .3s ease);
		&.to-left{
			background-position-x: -268px;
		}
		&:hover{
			background-color: rgba(85,136,221,1);
		}
  }
}
